<template>
  <div class="main">
    <div class="navbar-warper">
      <img src="../../assets/Navbar.png" alt="background">
      <div class="search">
        <img src="../../assets/flat-color-icons_search.png" alt="">
        <div class="search-title">
          <span>创思找工作</span>
        </div>
      </div>
      <div class="navbar">
        <ul>
          <li>首页</li>
          <li>岗位展示</li>
          <li>工作分类</li>
          <li>关于创思</li>
          <li>登录</li>
        </ul>
      </div>
      <button class="release-btn">发布岗位</button>
      <div class="title-top">
        <span>269+ 岗位需求</span>
      </div>
      <div class="title-center">
        <span>预祝你在创思信息找到心仪工作</span>
      </div>
      <div class="title-bottom">
        <span>创思信息以 “工匠精神” 推动产业互联网升级，推动政府事务单位业务处理自动化，助力工业4.0转型升级！</span>
      </div>
      <button class="see-btn">查看岗位</button>
    </div>
    <div class="popular-search">
      <div class="search-warper">
        <input class="keyword" type="text" value="请输入岗位关键词" >
        <input class="location" type="text" value="位置" >
        <button class="sort">分类 <img src="../../assets/Right.png" alt="icon"></button>
        <button class="post">选择岗位信息 <img src="../../assets/Right.png" alt="icon"></button>
        <button class="search-btn">找工作</button>
        <div class="popular">
          <div class="popular-title">最近搜索热词：</div>
          <ul>
            <li>JAVA工程师</li>
            <li>web前端工程师</li>
            <li>UI/UX</li>
            <li>行政管理</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="advantage">
      <img src="../../assets/Category.png" alt="background">
      <div class="title-top"><span>创思竞争优势</span></div>
      <p class="title-botton">创思信息科技发展有限公司成立于2000年，是国内智慧政务、智慧企业、智慧社区及智慧生活领域的信息化综合服务提供商，主要致力于为政企客户、社会团体和个人提供集软件开发、系统集成、IT运维、平台建设等于一体的信息化综合解决方案。 创思信息注重跟踪最新技术发展趋势，在大数据、云计算、移动互联网、人工智能、云移动设备等领域都已创建了多个具有自主知识产权且处于国内领先地位的核心技术平台。</p>
      <div class="message-card develop">
        <img class="icon-outside" src="../../assets/Ellipse.png" alt="icon">
        <img class="icon-inside" src="../../assets/carbon_application-web.png" alt="icon">
        <div class="title-top">
          <span>应用开发</span>
        </div>
        <p class="title-bottom">按照“平台+应用”的研发模式，形成了“智慧政务”、“智慧企业系列解决方案</p>
      </div>
      <div class="message-card core">
        <img class="icon-outside" src="../../assets/Ellipse.png" alt="icon">
        <img class="icon-inside" src="../../assets/nimbus_marketing.png" alt="icon">
        <div class="title-top">
          <span>核心平台</span>
        </div>
        <p class="title-bottom">拥有大数据、云计算、移动互联网、人工智能、云移动设备的核心技术平台。</p>
      </div>
      <div class="message-card system">
        <img class="icon-outside" src="../../assets/Ellipse.png" alt="icon">
        <img class="icon-inside" src="../../assets/bi_code-slash.png" alt="icon">
        <div class="title-top">
          <span>智慧系统</span>
        </div>
        <p class="title-bottom">国内智慧政务、智慧企业、智慧社区及智慧生活领域的信息化综合服务提供商</p>
      </div>
      <div class="message-card operation">
        <img class="icon-outside" src="../../assets/Ellipse.png" alt="icon">
        <img class="icon-inside" src="../../assets/arcticons_tagwriter.png" alt="icon">
        <div class="title-top">
          <span>IT运维</span>
        </div>
        <p class="title-bottom">提供集软件开发、系统集成、IT运维、平台建设等于一体的信息化综合解决方案</p>
      </div>
    </div>
    <div class="team">
      <div class="title-top"> 
        <span>创思团队建设</span>
      </div>
      <p class="title-bottom">获得工信部计算机系统集成壹级资质，通过ISO020000 IT服务管理体系认证，通过软件能力成熟度模型CMMI 5级认证，通过ISO27001信息安全管理系统认证，通过ISO14001国际环境管理系统认证，通过ITSS信息技术服务运行维护标准认证，获得专利技术1200余项，自有知识产权框架平台8个，获得软件著作权2500多个。创思信息现有员工530余人，其中：博士生100余人，研究生200余人，专业技术人才230余人。公司总部位于湖南长沙，下设杭州分公司、北京分公司、广州分公司、海口分公司、西安分公司、湘潭分公司及办事处。</p>
      <div class="message-card personnel">
        <img class="icon-outside" src="../../assets/Naver_Line_Webtoon_logo.png" alt="icon">
        <div class="title-top">
          <span>人才培养</span>
        </div>
        <p class="title-bottom">创思信息在湖南、广东设有自己的培训学校，员工可带薪报名参与。公司每年人才培养资金高达1.4个亿。</p>
      </div>
      <div class="message-card activities">
        <img class="icon-outside" src="../../assets/Dribbble_logo_perple.png" alt="icon">
        <div class="title-top">
          <span>团建活动</span>
        </div>
        <p class="title-bottom">团建活动有周末团建、下午茶、月团建、大团建、生日派对、一年一个大旅游团建。</p>
      </div>
      <div class="message-card promotion">
        <img class="icon-outside" src="../../assets/shopee-logo.png" alt="icon">
        <div class="title-top">
          <span>职级晋升</span>
        </div>
        <p class="title-bottom">完备的职级晋升机制，公开透明，能力优先，以技术和资质为基础，为员工安排公平公开的职级晋升线路。</p>
      </div>
      <div class="message-card bonus">
        <img class="icon-outside" src="../../assets/tokopedia-logo.png" alt="icon">
        <div class="title-top">
          <span>项目奖金</span>
        </div>
        <p class="title-bottom">创思80%以上的项目为自研自维护项目，项目开发及运维，提供丰厚的项目奖金，保证团队稳定。</p>
      </div>
    </div>
    <div class="work">
      <img src="../../assets/Looking.png" alt="background">
      <div class="content-warper left">
        <div class="title">你是不是想在创思找工作?</div>
        <p class="content">我们在线上为您安排了200多个工作岗位，欢迎你咨询！您可查询本网，可快速了解现有岗位情况。</p>
        <button class="display-btn">岗位展示</button>
      </div>
      <div class="content-warper right">
        <div class="title">你是不是想在平台发布工作？</div>
        <p class="content">人力资源部、部门经理、项目经理，都可以在此平台发布工作了哦，欢迎试用！</p>
        <button class="display-btn">发布工作</button>
      </div>
    </div>
    <div class="evaluate">
      <div class="portrait">
        <img class="Testinomi1" src="../../assets/Testinomi1.png" >
        <img class="Testinomi2" src="../../assets/Testinomi2.png" >
        <img class="Testinomi3" src="../../assets/Testinomi3.png" >
        <img class="Testinomi4" src="../../assets/Testinomi4.png" >
        <img class="Testinomi5" src="../../assets/Testinomi5.png" >
        <img class="Testinomi6" src="../../assets/Testinomi6.png" >
        <img class="Testinomi7" src="../../assets/Testinomi7.png" >
        <img class="Testinomi8" src="../../assets/Testinomi8.png" >
      </div>
      <div class="evaluate-title">用户评价</div>
      <p class="evaluate-content">“UI小姐姐在此提示现在正在制作这个页面的各位前端朋友，希望你能顺利通过测试，取得较好的成绩，不要忘记哦，这个页面需要做自适应，请按f12进入开发者模式，适配不同的屏幕大小。这个千万不要忘记哦。另外按钮动作，浮动动画也可以有哦。相信你，加油！”</p>
    </div>
    <div class="info">
      <img src="../../assets/Footer.png" alt="background">
      <div class="search">
        <img src="../../assets/flat-color-icons_search.png" alt="">
        <div class="search-title">
          <span>创思找工作</span>
        </div>
        <ul>
          <li>祝你的工作能被项目组认同</li>
          <li>chances@gmail.com</li>
          <li>400-669-0559</li>
          <li>欢迎来电咨询</li>
        </ul>
      </div>
      <div class="warper nav">
        <div class="title">站内导航</div>
        <ul>
          <li>关于创思</li>
          <li>常见问题</li>
          <li>岗位展示</li>
          <li>薪资说明</li>
        </ul>
      </div>
      <div class="warper sort">
        <div class="title">工作分类</div>
        <ul>
          <li>java工程师</li>
          <li>UI/UX工程师</li>
          <li>Web工程师</li>
          <li>行政管理</li>
        </ul>
      </div>
      <div class="submit">
        <div class="title">信息提交</div>
        <div class="submit-mail">
          <input type="text" value="邮箱">
          <button>提交</button>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup () {
    

    return {}
  }
}
</script>

<style lang="less" scoped>
.main{
    background-color: rgb(230, 230, 250);
  .navbar-warper{
    position: relative;
    font-weight: 400;
    color: #FFFFFF;
    img{
    width: 14.40rem;
    height: 7.715rem;
    }
    .search{
      position: absolute;
      top: 0.23rem;
      left: 0.67rem;
      img{
        width: 0.95rem;
        height: 0.95rem;
      }
      .search-title{
        position: absolute;
        top: 0.29rem;
        left: 1.1rem;
        width: 1.60rem;
        height: 0.375rem;
        color: #FFFFFF;
        font-size: 0.32rem;
      }
    }
    .navbar{
      position: absolute;
      top: 0.59rem;
      left: 4.5rem;
      font-size: 0.24rem;
      li{
        float: left;
        margin: 0 0.3rem;
      }
      li:hover{
        color: #2ab8d1;
        cursor: pointer;
      }
    }
    .release-btn{
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 1.75rem;
      height: 0.55rem;
      font-size: 0.23rem;
      background-color: #000000;
      border-radius: 8px;
    }
    .title-top{
      position: absolute;
      top: 2.18rem;
      left: 0.67rem;
      font-size: 0.48rem;
    }
    .title-center{
      position: absolute;
      top: 3.06rem;
      left: 0.65rem;
      font-size: 0.56rem;
    }
    .title-bottom{
      position: absolute;
      top: 4.04rem;
      left: 0.65rem;
      width: 5.28rem;
      font-size: 0.24rem;
    }
    .see-btn{
      position: absolute;
      top: 5.31rem;
      left: 0.65rem;
      width: 1.44rem;
      height: 0.5075rem;
      font-size: 0.16rem;
      background-color: #000000;
      border-radius: 8px;
    }

  }
  .popular-search{
    width: 10.85rem;
    height: 1.1844rem;
    margin: 0.325rem 1.78rem 0.5356rem 1.77rem;
    .search-warper{
      font-size: 0.2rem;
      font-weight: 400;
      .keyword{
        width: 2.2rem;
        height: 0.5544rem;
        text-align: center;
        outline-style: none;
        border: 0.02rem solid #4D4DDB;
        outline: none;
        border-radius: 8px;
      }
      .keyword:focus{
        border: 0.03rem solid #4D4DDB;
      }
      .location{
        margin-left: 0.27rem;
        width: 1.2rem;
        height: 0.5544rem;
        text-align: center;
        outline-style: none;
        border: 0.02rem solid #4D4DDB;
        outline: none;
        border-radius: 8px;
      }
      .location:focus{
        border: 0.03rem solid #4D4DDB;
      }
      .sort{
        margin-left: 0.62rem;
        width: 1.54rem;
        height: 0.5544rem;
        border: 0.02rem solid #4D4DDB;
        border-radius: 8px;
        background-color: #FFFFFF;
      }
      .post{
        margin-left: 0.62rem;
        width: 2.34rem;
        height: 0.5544rem;
        border: 0.02rem solid #4D4DDB;
        border-radius: 8px;
        background-color: #FFFFFF;
      }
      .search-btn{
        margin-left: 0.62rem;
        width: 1.40rem;
        height: 0.5544rem;
        border: none;
        border-radius: 8px;
        color: #FFFFFF;
        background-color: #2A2AD1;
      }
      .popular{
        display: flex;
        .popular-title{
          margin-top: 0.2856rem;
        }
        ul{
          display: flex;
          color: #FFFFFF;
          li{
            height: 0.3944rem;
            line-height: 0.3944rem;
            padding: 0 0.4rem;
            margin: 00.2rem;
            background-color: #4D4DDB;
            border-radius: 8px;
          }
        }
      }
    }
  }
  .advantage{
    position: relative;
    color: #FFFFFF;
    img{
      width: 14.40rem;
      height: 9.46rem;
    }
    .title-top{
      position: absolute;
      top: 2.97rem;
      right: 1.77rem;
      width: 4.17rem;
      height: 0.7rem;
      font-size: 0.48rem;
    }
    .title-botton{
      position: absolute;
      top: 3.99rem;
      right: 0.19rem;
      width: 5.75rem;
      height: 2.53rem;
      font-size: 0.16rem;
    }
    .message-card{
      position: relative;
      width: 3.05rem;
      height: 1.93rem;
      background-color: rgba(23, 23, 92, 1);
      border-radius: 8px;
      .icon-outside{
        position: absolute;
        top: 0.2rem;
        left: 0.12rem;
        width: 0.52rem;
        height: 0.52rem;
      }
      .icon-inside{
        position: absolute;
        top: 0.29rem;
        left: 0.21rem;
        width: 0.34rem;
        height: 0.34rem;
      }
      .title-top{
        position: absolute;
        top: 0.82rem;
        left: 0.31rem;
        width: 0.8rem;
        height: 0.24rem;
        font-size: 0.2rem;
      }
      .title-bottom{
        position: absolute;
        top: 1.14rem;
        left: 0.31rem;
        width: 2.3rem;
        height: 0.42rem;
        font-size: 0.14rem;
      }
    }
    .develop{
      position: absolute;
      top: 2.92rem;
      left: 0.65rem;
    }
    .core{
      position: absolute;
      top: 3.47rem;
      left: 4rem;    
    }
    .system{
      position: absolute;
      top: 5.4rem;
      left: 0.65rem;
    }
    .operation {
      position: absolute;
      top: 5.95rem;
      left: 4rem;    
    }
  }
  .team{
    position: relative;
    margin: 0.27rem 0.95rem 0 0.65rem;
    width: 12.80rem;
    height: 4.96rem;
    .title-top{
      position: absolute;
      top: 0.84rem;
      left: 0;
      width: 4.17rem;
      height: 0.7rem;
      font-size: 0.48rem;
    }
    .title-bottom{
      position: absolute;
      top: 1.86rem;
      left: 0;
      width: 5.75rem;
      height: 2.53rem;
      font-size: 0.16rem;
    }
    .message-card{
      position: relative;
      width: 3.05rem;
      height: 1.93rem;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 8px;
      .icon-outside{
        position: absolute;
        top: 0.2rem;
        left: 0.12rem;
        width: 0.55rem;
        height: 0.55rem;
      }
      .icon-inside{
        position: absolute;
        top: 0.29rem;
        left: 0.21rem;
        width: 0.34rem;
        height: 0.34rem;
      }
      .title-top{
        position: absolute;
        top: 0.82rem;
        left: 0.31rem;
        width: 0.8rem;
        height: 0.24rem;
        font-size: 0.2rem;
      }
      .title-bottom{
        position: absolute;
        top: 1.14rem;
        left: 0.31rem;
        width: 2.3rem;
        height: 0.42rem;
        font-size: 0.14rem;
      }
    }
    .personnel{
      position: absolute;
      top: 0;
      right: 3.35rem;
      color: #FFFFFF;
      background-color: rgba(42, 42, 209, 1);
    }
    .activities{
      position: absolute;
      top: 0.55rem;
      right: 0;
      background-color: rgba(255, 255, 255, 1);
    }
    .promotion{
      position: absolute;
      top: 2.48rem;
      right: 3.35rem;
      background-color: rgba(255, 255, 255, 1);      
    }
    .bonus{
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 1);
    }
  }
  .work{
    position: relative;
    img{
      width: 14.40rem;
      height: 9.46rem;
    }
    .content-warper{
      position: relative;
      width: 5.58rem;
      height: 2.4375rem;
      color: #FFFFFF;
      .title{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0.7rem;
        font-size: 0.36rem;
      }
      .content{
        position: absolute;
        top: 0.89rem;
        left: 0;
        width: 5.57rem;
        height: 0.7rem;
        font-size: 0.2rem;
      }
      .display-btn{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 1.44rem;
        height: 0.5075rem;
        font-size: 0.16rem;
        background-color: #000000;
        border-radius: 8px;
      }
    }
    .left{
      position: absolute;
      top: 3.37rem;
      left: 0.65rem;
    }
    .right{
      position: absolute;
      top: 3.37rem;
      right: 1.78rem;
    }
  }
  .evaluate{
    position: relative;
    width: 13.58rem;
    height: 5.74rem;
    margin: -0.35rem 0.35rem;
    .portrait{
      position: relative;
      width: 6.4rem;
      height: 5.74rem;
      .Testinomi1{
        position: absolute;
        top: 0.19rem;
        right: -0.2rem;
        width: 3.7rem;
        height: 3.7rem;
      }
      .Testinomi2{
        position: absolute;
        bottom: -0.4rem;
        right: 1.22rem;
        width: 2.15rem;
        height: 2.15rem;
      }
      .Testinomi3{
        position: absolute;
        bottom: -1rem;
        right: 3.28rem;
        width: 1.8rem;
        height: 1.8rem;
      }
      .Testinomi4{
        position: absolute;
        bottom: 0.5rem;
        right: 2.5rem;
        width: 2.15rem;
        height: 2.15rem;
      }
      .Testinomi5{
        position: absolute;
        bottom: 1rem;
        left: 0rem;
        width: 2.15rem;
        height: 2.15rem;
      }
      .Testinomi6{
        position: absolute;
        bottom: 3.7rem;
        right: 4.5rem;
        width: 1.8rem;
        height: 1.8rem;
      }
      .Testinomi7{
        position: absolute;
        bottom: 2.2rem;
        right: 3.3rem;
        width: 2.15rem;
        height: 2.15rem;
      }
      .Testinomi8{
        position: absolute;
        top: -0.5rem;
        right: 2.5rem;
        width: 2.15rem;
        height: 2.15rem;
      }
    }
    .evaluate-title{
      position: absolute;
      top: 0.8rem;
      right: 4.07rem;
      width: 2.9rem;
      height: 0.7rem;
      font-size: 0.48rem;
    }
    .evaluate-content{
      position: absolute;
      top: 1.82rem;
      right: 0.47rem;
      width: 6.50rem;
      height: 2.53rem;
      font-size: 0.2rem;
    }
  }
  .info{
    position: relative;
    color: #FFFFFF;
    font-size: 0.24rem;
    img{
      width: 14.40rem;
      height: 9.04rem;
    }
    .search{
      position: absolute;
      top: 2.41rem;
      left: 0.63rem;
      img{
        width: 0.95rem;
        height: 0.95rem;
      }
      .search-title{
        position: absolute;
        top: 0.29rem;
        left: 1.1rem;
        width: 1.60rem;
        height: 0.375rem;
        color: #FFFFFF;
        font-size: 0.32rem;
      }
      ul{
        li{
          margin: 0.16rem;
        }
      }
    }
    .warper{
      .title{
        font-size: 0.32rem;
      }
      ul{
        li{
          margin: 0.16rem;
          margin-left: -0.03rem;
        }
      }
    }
    .nav{
      position: absolute;
      top: 2.81rem;
      left: 6.23rem;
    }
    .sort{
      position: absolute;
      top: 2.81rem;
      left: 8.17rem;
    }
    .submit{
      position: absolute;
      top: 2.81rem;
      left: 10.27rem;
      .title{
        font-size: 0.32rem;
      }
      .submit-mail{
        margin-top: 0.2rem;
        position: relative;
        width: 3.48rem;
        height: 0.55rem;
        input{
          padding-left: 0.1rem;
          background-color: #000000;
          outline-style: none;
          border: 0.02rem solid rgba(255, 255, 255, 1);
          border-radius: 8px;
          width: 3.48rem;
          height: 0.55rem;
        }
        button{
          position: absolute;
          top: 0.08rem;
          right: 0.08rem;
          width: 1.22rem;
          height: 0.4rem;
          border: none;
          border-radius: 8px;
          color: #FFFFFF;
          background-color: #2A2AD1;
        }
      }
    }

  }

}

</style>